<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ml20 {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h2 class="title">React演示--jsx</h2>
    <div id="root"></div>
    
</body>
<script src="./lib/react.js"></script>
<script src="./lib/react-dom.js"></script>
<script src="./lib/babel.min.js"></script>
<script type="text/babel">
    //获取dom
    const box=document.querySelector('#root')
    //创建一个react根元素
    const root=ReactDOM.createRoot(box)

    class InputCom extends React.Component {
        constructor() {
            super();
            this.state={
                v:''
            }

            this.inp=React.createRef();
        }  

        handleChange(e) {
            this.setState({
                v:e.target.value
            })
        }

        //添加
        addItem(e) {
           this.props.add({
            id:+new Date(),
            name:this.state.v,
            checked:false,
            address:'北京'
           })

           //清空输入框
          this.setState({
            v:''
          })

          //自动获取input焦点
        this.inp.current.focus();
           
        }

        render() {
            const {v}=this.state;
            return  (
                <div>
                    <input ref={ this.inp } type="text" value={ v } onChange={this.handleChange.bind(this)} />
                    <button className="ml20" onClick={this.addItem.bind(this)}>添加</button>
                </div>
            )
        }
    }

    class FooterControl extends React.Component {

            render() {
                return (
                    <div>底部控制组件</div>
                )
               
                
            }
    }

    class TodoList extends React.Component {
        constructor() {
            super()
            //初始化数据
            this.state={
                userArr:[
                    {id:1,name:'张三',address:'北京'},
                    {id:2,name:'李四',address:'天津'},
                    {id:3,name:'王五',address:'上海'},
                    {id:4,name:'马六',address:'河南'},
                ]
            }
          
        }
       
        //添加的方法
        addItemOk(item) {
            console.log('item:',item)
           item && this.state.userArr.push(item)
           this.setState({
            userArr:this.state.userArr
           })
        }

         //真正删除方法
         deleteItemOk(id) {
            console.log('我在们级拿到子组件的id:',id)
            const index=this.state.userArr.findIndex(item=>{
                return item.id===id;
            })

             this.state.userArr.splice(index,1)
            // console.log(' this.state.userArr:',this.state.userArr)

            // //更新视图
            this.setState({
                userArr: this.state.userArr
            })
        }
       
        render() {
            return <div>
                     <h2>todolist演示</h2>
                     <InputCom add={ this.addItemOk.bind(this) } />
                     <List userArr={this.state.userArr}  delItem={this.deleteItemOk.bind(this)}  />
                     <FooterControl />
                </div>
        }

    }

    class List extends React.Component {
        
       render() {
        const {userArr,delItem}=this.props;
        return <div>
               { userArr.length>0 ?  <ul>
                  {userArr.map(item=>{
                        return <ListItem  key={ item.id } {...item} delItem={ delItem  } />
                    })  }   
                </ul>:<p>已经没有数据了</p> }
              </div>
       }
    }

    class ListItem extends React.Component {
        constructor(props) {
            super()
          
        }

      
        deleteItemBtn(id,e) {
            this.props.delItem(id)
           
        }
       
        render() {
            const {id,name,address}=this.props
            return <li>
                <input type="checkbox" />
                姓名：{ this.props.name }
                <span>地址：{ this.props.address }</span>
                <button onClick={ this.deleteItemBtn.bind(this,id) }>删除</button>
                </li>
        }
    }
  
    //类组件
    class App extends React.Component {

        render() {
            return  <div>
            <h2>我是一个app根组件</h2>
            <TodoList />
        </div> 
        }
      
    }

    //渲染
    root.render(<App />)


</script>
</html>